<template>
    <div class="login-modal">
        <div class="mask" @click="changeIsShowLoginModal(false)"></div>
        <div class="login-box">
            <img class="close" @click="changeIsShowLoginModal(false)"
                src="http://sc.wolfcode.cn/assets/integralMall/img/index/userArrow.png">
            <ul class="title">
                <li :class="isShowForm?'active':''" @click="isShowForm=true">手机号码登录</li>
                <li style="cursor:auto">|</li>
                <li :class="isShowForm?'':'active'" @click="weixinClick">微信扫码登录</li>
            </ul>
            <div class="body">
                <div class="form" v-show="isShowForm">
                    <input type="text" v-model="phoneNumber" required="required" placeholder="请输入手机号">

                    <!-- 滑动验证码 -->
                    <slide-verify :l="42" :r="10" :w="400" :h="155" :slider-text="msg" @success="onSuccess"
                        @fail="onFail" @refresh="onRefresh" class="slide-box"></slide-verify>

                    <div class="phone-msg">
                        <input placeholder="请输入短信验证码" v-model="SMScode" name="p">
                        <div class="get-msg">
                            <span v-show="!isShowCount" @click="getSMScode">获取验证码</span>
                            <span v-show="isShowCount">{{count}}s</span>
                        </div>
                    </div>

                    <button class="login-btn" type="submit" @click="Login">登录</button>
                </div>
                <div id="weixin" class="qrcode" v-show="!isShowForm">微信二维码</div>
            </div>
        </div>
    </div>
</template>
  
<script>
import { mapMutations, mapActions } from 'vuex';
import { SendSMSAPI, PhoneLoginAPI, UserProfilesAPI } from '../request/api';
import { validatePhoneNumber } from '../utils'
export default {
    name: "Login",
    data() {
        return {
            //切换登陆方式
            isShowForm: true,
            //滑动验证码文字
            msg: '向右滑动',
            //手机号
            phoneNumber: '',
            // 倒计时的数字
            count: 60,
            //是否展示计数
            isShowCount: false,
            //计时器
            timer: null,
            //用户输入的验证码
            SMScode: "",
        }
    },
    methods: {
        ...mapMutations({
            changeIsShowLoginModal: "showLoginModal/changeIsShowLoginModal",
            changeIsLogined: "loginStatus/changeIsLogined"
        }),
        ...mapActions({
            asyncUserAction: "userInfo/asyncUserAction"
        }),
        //登陆
        async Login() {
            // if (!this.verifyFn()) return;
            // if (!this.SMScode.trim()) {
            //     console.log(!this.SMScode.trim());
            //     this.$message.error('请输入验证码');
            //     return
            // } else if (this.SMScode.trim().length != 4) {
            //     this.$message.warning('请输入正确的验证码');
            //     return
            // }
            await PhoneLoginAPI({
                // verifyCode: this.SMScode,
                // phone: this.phoneNumber
                verifyCode: 6666,
                phone: 15912345678
            }).then(res => {
                if (res.code == 0) {
                    console.log(res);
                    this.$message.success('登录成功');
                    this.changeIsShowLoginModal(false);
                    this.changeIsLogined(true);
                    localStorage.setItem("x-auth-token", res["x-auth-token"]);
                }
            }).catch(err => console.log(err))
            await this.asyncUserAction().then(res => {
                console.log(res);
            }).catch(err => console.log(err))

        },
        //倒计时
        countDown() {
            this.timer = setInterval(() => {
                this.count--;
                if (this.count == 0) {
                    this.count = 60;
                    clearInterval(this.timer);
                    this.isShowCount = false;
                }
            }, 1000);
        },
        //验证
        verifyFn() {
            // //判断手机号
            // if (!validatePhoneNumber(this.phoneNumber)) {
            //     this.$message.error('请输入正确的手机号');
            //     return false
            // }
            // //判断滑动验证码
            // if (this.msg == "向右滑动" || this.msg == "再试一次") {
            //     this.$message.error('请将移动滑块至指定位置');
            //     return false
            // }
            // return true
        },
        //获取验证码
        async getSMScode() {
            //验证
            if (!this.verifyFn()) return;
            //发送请求
            await SendSMSAPI({
                phone: this.phoneNumbers
            }).then(res => {
                if (res.code == 0) {
                    this.$message.success('发送成功');
                    this.isShowCount = true;
                    this.countDown()
                } else {
                    alert(res.message);
                }
            }).catch(err => console.log(err))
        },
        //微信登陆
        weixinClick() {
            this.isShowForm = false;
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d",
                scope: "snsapi_login",
                redirect_uri: "http://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                state: encodeURIComponent(window.btoa("http://127.0.0.1:8081" + _this.$router.path)),
                href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30="
            })
        },
        //拼图成功
        onSuccess(times) {
            let ms = (times / 1000).toFixed(1)
            this.msg = 'login success' + ms + 's';
        },
        //拼图失败
        onFail() {
            this.onRefresh(); //刷新
            this.msg = '向右滑动'
        },
        //拼图刷新
        onRefresh() {
            this.msg = '再试一次'
        }
    },
    watch: {}
};
</script>
  
<style lang="less" scoped>
.login-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;

    .mask {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
    }

    .login-box {
        width: 400px;
        height: 430px;
        background: #ecf0f3;
        padding: 40px;
        border-radius: 20px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        text-align: center;

        .close {
            position: absolute;
            right: 30px;
            top: 30px;
            cursor: pointer;
        }

        .title {
            display: flex;
            justify-content: center;
            padding-top: 40px;

            li {
                margin: 0 10px;
                font-size: 18px;
                cursor: pointer;
                color: #ccc;
            }

            li.active {
                color: #333;
            }
        }

        .body {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;

            .form {
                margin-top: 30px;
                width: 100%;

                input {
                    width: 376px;
                    height: 30px;
                    margin-bottom: 25px;
                    outline: none;
                    padding: 10px;
                    font-size: 13px;
                    border: none;
                }


                .phone-msg {
                    display: flex;
                    justify-content: space-between;

                    .get-msg {
                        width: 100px;
                        height: 50px;
                        background-color: #0A328E;
                        color: #fff;
                        font-size: 14px;
                        border: none;
                        cursor: pointer;
                        text-align: center;
                        line-height: 50px;

                        span {
                            display: block;
                        }
                    }

                    input {
                        width: 260px;
                    }
                }

                .login-btn {
                    width: 360px;
                    height: 50px;
                    display: block;
                    background-color: #0A328E;
                    color: #fff;
                    padding: 10px;
                    font-size: 15px;
                    line-height: normal;
                    margin: 0 auto;
                    border: none;
                    cursor: pointer;
                }
            }

            .qrcode {
                padding-top: 20px;
            }
        }
    }
}

/deep/ .slide-box {
    width: 100% !important;
    position: relative;
    box-sizing: border-box;
    margin-bottom: 20px;

    canvas {
        display: none;
        position: absolute;
        left: 0;
        top: -120px;
        width: 100%;
        box-sizing: border-box;
    }

    .slide-verify-block {
        width: 68px;
        height: 156px;
    }

    .slide-verify-slider {
        margin: 0;
    }

    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }

    &:hover {
        canvas {
            display: block;
        }

        .slide-verify-refresh-icon {
            display: block;
        }
    }
}
</style>
  